<template>
  <div class="">
    <div class="info-title">裁判管理</div>
  <el-card class="full-height full-width">
    <search-table class="full-height full-width"
      :table-loading="loading"
      :tableData="tableData"
      :ref="tableRef"
      :labelWidth="'40px'"
      :row-keys="row => row.id"
      @query="currentPage = 1; query();"
      @reset="doReset">
      <template v-slot:row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="名称">
              <el-input placeholder="请输入内容" v-model="searchForm.name" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电话">
              <el-input placeholder="请输入内容" v-model="searchForm.tel" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别">
              <el-select placeholder="请选择" v-model="searchForm.sex" clearable>
                <el-option :label="'男'" :value="1"></el-option>
                <el-option :label="'女'" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template v-slot:actions>
        <el-button size="small" type="primary" v-on:click="addReferee()">添加裁判</el-button>
        <!-- <el-button size="small" type="primary" v-on:click="editReferee()">编 辑</el-button>
        <el-button size="small" type="primary" v-on:click="handlerDelete()">删除/批量删除</el-button> -->
      </template>
      <template >
        <el-table-column :reserve-selection="true" type="selection" width="55" />
        <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip />
        <el-table-column prop="sex" label="性别" width="50" show-overflow-tooltip />
        <el-table-column prop="username" label="电话" width="100" show-overflow-tooltip />
        <el-table-column prop="idCard" label="身份证" width="150" show-overflow-tooltip />
        <el-table-column prop="province" label="省份" show-overflow-tooltip />
        <el-table-column prop="unit" label="单位" show-overflow-tooltip />
        <el-table-column prop="state" label="状态" show-overflow-tooltip />
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="handleRemove(scope.$index, scope.row)">移除</el-button>
          </template>
        </el-table-column>
      </template>
      <template v-slot:footer>
        <el-pagination
          background
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </template>
    </search-table>
    <el-dialog  :close-on-click-modal="false" title="添加裁判" :visible.sync="dialogFormAdd">
      <el-table border :data="refereeData" @selection-change="selectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column property="name" label="姓名" width="150"></el-table-column>
        <el-table-column property="username" label="电话" width="200"></el-table-column>
        <el-table-column property="refereeLevel" label="级别"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormAdd = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
    </el-card>
  </div>
  </template>
  
  <script>
  import { mapState } from 'vuex'
  import searchTable from '@/components/PublicTable/index.vue'
  import {getRefereeList, getAddRefereeList,batchDelete, insert, getById, update} from "@/api/referee";
  import { Message} from "element-ui";
  
  export default{
    components:{
      searchTable
    },
    data () {
      return {
        value:[],
        tableData: [],
        refereeData:[],
        loading: false,
        tableRef: 'tableRef',
        searchForm: {},
        currentPage: 1,
        pageSizes: [10, 20, 50],
        pageSize: 10,
        total: 0,
        canAddReferee:[],
        selectionList:[], //定义删除/批量删除
        dialogFormAdd:false,
        sexArry:[
          {
            "id": 1,
            "name": "男"
          },
          {
            "id": 2,
            "name": "女"
          }
        ],
        levelArray:[],
        stateArray:[
          {
            "id": 1,
            "name": "显示"
          },
          {
            "id": 2,
            "name": "隐藏"
          }
        ]
      };
    },
    created() {
      this.query()
    },
    computed:{
      ...mapState({
        user:state => state.user.userInfo
      })
    },
    methods: {
      getCanAddReferee() {
        getAddRefereeList().then(res => {
          this.refereeData = res.data.list
        })
      },
      query() {
        // 请求表格数据
        var params ={
          'pageNum': this.currentPage,
          'pageSize': this.pageSize,
          'name':this.searchForm.name,
          'tel':this.searchForm.tel,
          'sex':this.searchForm.sex
        }
        getRefereeList(params).then(res => {
          // 把请求到的数据给testDatas数组
          this.tableData = res.data.list
          // 当前页数
          this.currentPage = res.data.pageNum
          // 当前页数量
          this.pageSize = res.data.pageSize
          // 分页总数
          this.total = res.data.total
        //   console.log(JSON.stringify(res.data.data.total))
        })
        .catch((error) => {
          console.log(error)
        })
      },
      doReset() {
        // 重置搜索条件
        // 请求表格数据
        this.tableData = [];
        this.restForm();
        this.query();
      },
      restForm(){
        this.searchForm.name = ""
        this.searchForm.tel = ""
        this.searchForm.sex = ""
      },
      selectionChange(val) {
        this.selectionList = []
        val.forEach(element => {
          this.selectionList.push(element.userId)
        });
      },
      // handlerDelete(){
      //   // 数组转字符串使用逗号分隔
      //   let ids =  this.selectionList.join(",")
      //   console.log(ids)
      //   var params ={
      //       'ids': ids
      //   }
      //   batchDelete(params).then(res =>{
      //     Message({
      //       message: '批量删除成功',
      //       type: 'success',
      //       duration: 3 * 1000
      //     })
      //     // 重新查询表格
      //     this.query()
      //   }).catch((error) => {
      //     console.log(error)
      //   })
      // },
      handleSizeChange(val) {
        // 改变每页条数
        this.pageSize = val
        this.query()
      },
      handleCurrentChange(val) {
        // 切换页码
        this.currentPage = val
        this.query()
      },
      // table 数据转换
      formatSexType(row, column){
        if(row.sex === '1'){
            return '男'
        } else if(row.sex === '2') {
            return '女'
        } else {
            return ''
        }
      },
      // 移除随队裁判
      handleRemove(index, row) {
        let id = row.id
        var params ={
            'id': id
        }
        batchDelete(params).then(res =>{
          Message({
            message: '移除裁判成功',
            type: 'success',
            duration: 3 * 1000
          })
          // 重新查询表格
          this.query()
        }).catch((error) => {
          console.log(error)
        })
      },
      // 新增裁判
      addReferee(){
        // this.getCanAddReferee()
        this.dialogFormAdd = true
      },
      // 修改裁判
      // editReferee(){
      //   // console.log('下标', index)
      //   // console.log('数据', row)
      //   console.log(this.selectionList)
      //   console.log(typeof(this.selectionList))
      //   let id = this.selectionList[0]
      //     var params = {
      //       'id' : id
      //     }
      //   getById(params).then(res =>{
      //     this.referee = {}
      //     this.referee = res.data
      //     this.dialogFormEdit = true
      //   }).catch((error) => {
      //       console.log(error)
      //   })
      // },
      add(){
        let ids =  this.selectionList.join(",")
        console.log(ids)
        var params ={
            'userIds': ids
        }
        insert(params).then(res =>{
          Message({
            message: '裁判新增成功',
            type: 'success',
            duration: 3 * 1000
          })
          // 新增弹出框隐藏
          this.dialogFormAdd = false
          // 重新查询表格
          this.query()
        }).catch((error) => {
          console.log(error)
        })
      },
      // edit(referee){
      //   update(referee).then(res =>{
      //     Message({
      //       message: '裁判修改成功',
      //       type: 'success',
      //       duration: 3 * 1000
      //     })
      //     // 新增弹出框隐藏
      //     this.dialogFormEdit = false
      //     // 重新查询表格
      //     this.query()
      //   }).catch((error) => {
      //     console.log(error)
      //   })
      // }
    }
  }
  </script>
  <style>
  .info-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  </style>